<template>
  <el-card>
    <!-- <div slot="header" class="header">
      <div class="category-header">
        <span>销售额类别占比</span>
        <el-radio-group v-model="value">
          <el-radio-button label="全部渠道"></el-radio-button>
          <el-radio-button label="线上"></el-radio-button>
          <el-radio-button label="门店"></el-radio-button>
        </el-radio-group>
      </div>
    </div> -->
    <div>
      <div class="charts" ref="charts"></div>
    </div>
  </el-card>
</template>

<script>
import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      m2R2Data: [
        {
          value: 300,
          legendname: "奇趣事",
          name: "奇趣事",
          itemStyle: { color: "#5d8df6" },
        },
        {
          value: 100,
          legendname: "会生活",
          name: "会生活",
          itemStyle: { color: "#13cfd5" },
        },
        {
          value: 260,
          legendname: "爱旅行",
          name: "爱旅行",
          itemStyle: { color: "#00e272" },
        },
        {
          value: 180,
          legendname: "趣美味",
          name: "趣美味",
          itemStyle: { color: "#ffa36f" },
        },
      ],
    };
  },
  mounted() {
    // 圆环图
    let mychart = echarts.init(this.$refs.charts);
    mychart.setOption({
      title: [
        {
          text: "分类文章数量比",
          textStyle: {
            fontSize: 18,
            color: "#464646",
            fontWeight: 700,
          },
          left: "center",
          top: "2%",
        },
      ],
      color: ["#5d8df6", "#13cfd5", "#00e272", "#ffa36f"],
      tooltip: {
        trigger: "item",
        backgroundColor: "#fff",
        borderColor: "",
        textStyle: {
          color: "#333",
          fontSize: 14,
        },
        formatter: function (parms) {
          //   var str=  "访问来源"+"</br>"+
          //     parms.data.legendname + parms.data.value+"</br>"+
          //     "数量："+ parms.data.value+"</br>"+
          //     "占比："+ parms.percent+"%";
          var str =
            "访问来源" +
            "</br>" +
            parms.data.legendname +
            ":" +
            parms.data.value +
            " (" +
            parms.percent +
            "%" +
            ")" +
            "</br>";
          return str;
        },
      },
      legend: {
        // type:"scroll",
        // orient: 'vertical',
        left: "center",
        align: "left",
        top: "20%",
        textStyle: {
          color: "#000",
        },
        height: 250,
      },
      toolbox: {
        show: true,
        left: "center",
        top: "10%",
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {},
        },
      },
      series: [
        {
          name: "标题",
          type: "pie",
          center: ["50%", "65%"],
          radius: ["45%", "60%"],
          //  clockwise: false, //饼图的扇区是否是顺时针排布
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: true,
              position: "outter",
              formatter: function (parms) {
                return parms.data.legendname;
              },
            },
          },
          labelLine: {
            normal: {
              length: 15,
              length2: 10,
              //   smooth:true,
            },
          },
          data: this.m2R2Data,
        },
      ],
    });
    //绑定事件

    /* mychart.on("mouseover", (params) => {
      //获取鼠标移上去那条数据
      const { name, value } = params.data;
      //重新设置标题
      mychart.setOption({
        title: {
          text: name,
          subtext: "value",
        },
      });
    }); */
  },
};
</script>

<style lang="less" scoped>
.charts {
  height: 350px;
}
::v-deep .el-card__body {
  padding: 0;
}
</style>
